/*
 *@description: 轮播图管理
 *@Author:@reynold
 *@Date:2025-03-22 11:02:33
 *@Update:2025-03-22 11:02:33
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="carbox">
      <!-- 头部按钮 -->
      <div class="header">
        <div class="header_btn">
          <el-button size="mini" @click="openDrawer">新增</el-button>
        </div>
        <div class="header_btn">
          <el-button size="mini" @click="previewCar">预览</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="content">
         <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="carName"
            label="轮播图名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="carDis"
            label="轮播图描述"
            width="400">
          </el-table-column>
          <el-table-column
            label="轮播图图片">
            <template slot-scope="scope">
              <img :src="scope.row.carImg" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status=='正常'" type="success" effect="dark" size="mini">{{scope.row.status}}</el-tag>
              <el-tag v-else type="danger" effect="dark" size="mini">{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button class="editBtn" type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button class="delBtn" type="text" size="mini">删除</el-button>
              <el-button class="otherBtn" v-if="scope.row.status=='停用'" type="text" size="mini">启用</el-button>
              <el-button class="otherBtn" v-else type="text" size="mini">停用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 抽屉 -->
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item label="轮播图名称" :label-width="formLabelWidth">
              <el-input v-model="form.carName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="轮播图描述" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入描述"
                v-model="form.carDis">
              </el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="停用" value="停用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="轮播图图片" :label-width="formLabelWidth">
              
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return{
      tableData:[],
      title:'',
      drawer:false,
      form:{},
      loading:false,
      formLabelWidth: '150px',
    }
  },
  methods:{
    // 获取轮播数据
    getCarData(){
      instance.get('/carousel/list').then(res=>{
        console.log(res);
        this.tableData = res.data.data
      })
    },
    // 打开抽屉 新增轮播图
    openDrawer(){
      this.title = '新增轮播图',
      this.drawer = true,
      this.form = {}
    },
    // 取消抽屉
    cancelForm(){
      this.drawer = false
    },
    // 编辑轮播图
    edit(scope){
      this.title = '编辑轮播图',
      this.drawer = true
      this.form = scope
    },
    // 提交新增或编辑
    handleSubmit(){
      if(this.title == '新增轮播图'){
        // 新增
        this.loading = true
        instance.post().then(res=>{

          this.loading = false
          this.drawer = false
        })
      }else{
        // 编辑
      }
    },
    // 预览轮播图
    previewCar(){

    }
  },
  created(){
    this.getCarData()
  },
  components:{
    Card
  }
}
</script>

<style lang="less" scoped>
.carbox{
  .header{
    display: flex;
    .header_btn{
      margin-right: 10px;
      .el-button--mini{
        background-color: #188b8f;
        color: #fff;
      }
    }
  }
  .content{
    .editBtn {
      color: #188b8f;
    }
    .delBtn{
      color: #ff6464;
    }
    .otherBtn{
      color: #189fff;
    }
  }
}
</style>